<template>
	<view class="content">
		<view class="header">
			<view class="timeBox">
				<view class="starTime font28" @click="starOpen">
					<view class="title">
						开始日期：{{starTime}}
					</view>
					<view class="icon">


						<image src="../../../static/images/shopowner/date.png" mode="aspectFit"></image>


						<image src="../../../static/images/shopowner/date.png" mode="aspectFit"></image>

						<image src="/shopowner/static/images/date.png" mode="aspectFit"></image>



						<image src="/shopowner/static/images/date.png" mode="aspectFit"></image>

					</view>
				</view>
				<view class="endTime font28" @click="endOpen">
					<view class="title">
						结束日期：{{endTime}}
					</view>
					<view class="icon">


						<image src="../../../static/images/shopowner/date.png" mode="aspectFit"></image>


						<image src="../../../static/images/shopowner/date.png" mode="aspectFit"></image>

						<image src="/shopowner/static/images/date.png" mode="aspectFit"></image>



						<image src="/shopowner/static/images/date.png" mode="aspectFit"></image>

					</view>
				</view>
			</view>
			<view class="product">
				<picker @change="productChange" :value="index" :range="productList">
					<view class="productB">
						<view class="uni-input">
							<view class="title font28">
								产品名称
							</view>
							<view class="des font28">
								{{productList[index]}}
							</view>
						</view>
						<view class="left">
							<view class="op font28">
								选择
							</view>
							<view class="icon">


								<image src="../../../static/images/shopowner/1.png" mode="aspectFit"></image>


								<image src="../../../static/images/shopowner/1.png" mode="aspectFit"></image>

								<image src="/shopowner/static/images/1.png" mode="aspectFit"></image>



								<image src="/shopowner/static/images/1.png" mode="aspectFit"></image>

							</view>
						</view>
					</view>
				</picker>
			</view>
			<view class="query font28" @click="query">
				查询
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in profitList" :key="index">
					<view class="left">
						<view class="payName">
							<view class="title font30 font500">
								{{item.payName}}
							</view>
							<view class="price font30 font500">
								￥{{item.price}}
							</view>
						</view>
						<view class="shopName font30 fontw">
							{{item.shopName}}
						</view>
					</view>
					<view class="customer">
						<view class="title font28">
							客户名称
						</view>
						<view class="customer_d font28">
							{{item.customer}}
						</view>
					</view>
					<view class="placement">
						<view class="title font28">
							下单人
						</view>
						<view class="placement_d font28">
							{{item.placement}}
						</view>
					</view>
					<view class="Z_price">
						<view class="title font28">
							总金额
						</view>
						<view class="Z_price_d font28">
							{{item.Z_price}}
						</view>
					</view>
					<view class="discount">
						<view class="title font28">
							优惠金额
						</view>
						<view class="discount_d font28">
							{{item.discount}}
						</view>
					</view>
					<view class="pay">
						<view class="title font28">
							支付方式
						</view>
						<view class="pay_d font28">
							{{item.pay}}
						</view>
					</view>
					<view class="c_time">
						<view class="title font28">
							下单时间
						</view>
						<view class="c_time_d font28">
							{{item.c_time}}
						</view>
					</view>
					<view class="p_time">
						<view class="title font28">
							付款时间
						</view>
						<view class="p_time_d font28">
							{{item.p_time}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<yt-dateTimePicker ref="starShow" @submit="starTimes" :start-year="2000" :end-year="2099" time-init="2023-5-20"
			:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />
		<yt-dateTimePicker ref="endShow" @submit="endTimes" :start-year="2000" :end-year="2099" time-init="2023-5-20"
			:time-hide="[true, true, true, true, true, true]" :time-label="['年', '月', '日', '时', '分', '秒']" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				starTime: '', //开始时间
				endTime: '', // 结束时间
				index: 0,
				productList: ['开背精油1', '开背精油2', '开背精油3', '开背精油4', '开背精油5', '开背精油6'],
				profitList: [{
					payName: "微信支付",
					price: '79.00',
					shopName: '草本古方养生馆',
					customer: '张小姐',
					placement: '张小乔',
					Z_price: '79.00',
					discount: '10.00',
					pay: '银行卡（储值）',
					c_time: '2024-09-12 16:28:25',
					p_time: '2024-09-12 16:29:25',
				}, {
					payName: "微信支付",
					price: '79.00',
					shopName: '草本古方养生馆',
					customer: '张小姐',
					placement: '张小乔',
					Z_price: '79.00',
					discount: '10.00',
					pay: '银行卡（储值）',
					c_time: '2024-09-12 16:28:25',
					p_time: '2024-09-12 16:29:25',
				}, {
					payName: "微信支付",
					price: '79.00',
					shopName: '草本古方养生馆',
					customer: '张小姐',
					placement: '张小乔',
					Z_price: '79.00',
					discount: '10.00',
					pay: '银行卡（储值）',
					c_time: '2024-09-12 16:28:25',
					p_time: '2024-09-12 16:29:25',
				}]
			};
		},
		onLoad() {
			this.getCurrentTime()
		},
		methods: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.starTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				this.endTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			productChange(e) {
				this.date = e.detail.value
			},
			starOpen() {
				this.$refs.starShow.show();
			},
			endOpen() {
				this.$refs.endShow.show();
			},
			starClose() {
				this.$refs.starShow.hide();
			},
			endClose() {
				this.$refs.endShow.hide();
			},
			// 开始时间
			starTimes(e) {
				this.starTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
			},
			// 结束时间
			endTimes(e) {
				this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
			},
			query() {

			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			background-color: #fff;
			padding: 36rpx 37rpx;
			margin-bottom: 16rpx;

			.timeBox {
				.starTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.endTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 2rpx solid #DFDFDF;
					margin-bottom: 18rpx;
					padding: 30rpx 18rpx;

					.title {
						color: #333333;
					}

					.icon {
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

			}

			.product {
				border: 2rpx solid #DFDFDF;
				padding: 30rpx 18rpx;
				margin-bottom: 25rpx;

				.productB {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.uni-input {
						display: flex;
						align-items: center;

						.title {
							color: #333333;
							margin-right: 31rpx;
						}

						.des {
							color: #666666;
							;
						}
					}

					.left {
						.op {
							color: #666666;
						}

						.icon {
							width: 13rpx;
							height: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 13rpx;
								height: 26rpx;
							}
						}
					}
				}
			}

			.query {
				background: #1EB481;
				border-radius: 20rpx;
				height: 75rpx;
				color: #fff;
				text-align: center;
				line-height: 75rpx;
			}
		}

		.box {
			padding: 36rpx 37rpx;

			.scroll-Y {
				height: calc(100vh - 512rpx - 32rpx - 104rpx - var(--status-bar-height));

				.item {
					padding: 54rpx 29rpx;
					background-color: #fff;
					margin-bottom: 18rpx;

					.left {
						justify-content: space-between;
						margin-bottom: 42rpx;

						.payName {
							display: flex;
							align-items: center;

							.title {
								color: #333333;
								margin-right: 28rpx;
							}

							.price {
								color: #FF5400;
							}
						}

						.shopName {
							color: #1EB481;
						}
					}

					.customer {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.customer_d {
							color: #333333;
						}
					}

					.placement {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.placement_d {
							color: #333333;
						}
					}

					.Z_price {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.Z_price_d {
							color: #FF5400;
						}
					}

					.discount {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.discount_d {
							color: #FF9F2E;
						}
					}

					.pay {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.pay_d {
							color: #333333;
						}
					}

					.c_time {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.c_time_d {
							color: #333333;
						}
					}

					.p_time {
						display: flex;
						align-items: center;
						margin-bottom: 42rpx;

						.title {
							color: #A1A7B2;
							width: 160rpx;
						}

						.p_time_d {
							color: #333333;
						}
					}
				}

			}
		}
	}
</style>